﻿var photoDetail = {
    arr: new Array(),
    divElement: '.list_girl',
    imgSr: 'vcmedia.vn',
    app_key: 'd9c694bd04eb35d96f1d71a84141d075',
    id: 0,
    title: '',
    sapo: '',
    name: '',
    ename: '',
    desc: '',
    vote: '',
    avatar: '',
    url: null,
    width: 0,
    height: 0,
    photoWidth: 0,
    flag: true,
    allowFullScreen: true,
    isList: true,
    isVote: false,
    lockVote: 0,
    displayVote: 0,
    init: function () {
        var me = this;
        var result = '';
        me.arr = new Array();

        me.title = $('h1.d-title').text(); // title bai viet
        me.sapo = $('h2.sapo').text(); // sapo bai viet

        var $imgClick = $(me.divElement).find('img[src*="' + me.imgSr + '"]');

        $imgClick.each(function () {
            result += String.format('<li><a href="javascript:void(0)"><img src="{0}" alt="" /></a></li>', $(this).attr('src'));
            me.arr.push($(this).attr('src'));
        });

        $imgClick.hover(function () {
            $(this).css('cursor', '-webkit-zoom-in');
            $(this).css('cursor', '-moz-zoom-in');
        }, function () {
            $(this).css('cursor', 'none');
        });

        $imgClick.off('click').on('click', function () {
            me.openPopup();
            me.bindData($(this).attr('src'));
        });


        if (window.location.hash != '') {
            if (window.location.hash.split('#')[1].indexOf('lb') != -1) {
                var lb = window.location.hash.split('#')[1].replace('lb', '');
                if ($(me.divElement).find('img[lb="' + lb + '"]') != null) {
                    me.openPopup();
                    me.bindData($(me.divElement).find('img[lb="' + lb + '"]').attr('src'));
                }
            }
        }

        $('.popup-detail-content').hover(function () {
            $(this).css('cursor', 'pointer');
        });

        $('.popup-slide ul li').hover(function () {
            $(this).css('opacity', '1');
        }, function () {
            $(this).css('opacity', '0.3');
        });

        $('#popup-detail-left').hover(function () {
            if (me.isZoom() || !me.flag) {
                $('.popup-detail-content .zoom').fadeIn();
            } else {
                $('.popup-detail-content .zoom').hide();
            }

            if ($.inArray($('.popup-slide li.active img').attr('src'), me.arr) == 0) {
                if (me.arr.length == 1)
                    return;

                $('.popup-detail-content .next').show();
            } else if ($.inArray($('.popup-slide li.active img').attr('src'), me.arr) == me.arr.length - 1) {
                $('.popup-detail-content .prev').show();
            } else
                $('.popup-detail-content .prev, .popup-detail-content .next').fadeIn();

        }, function () {
            $('#popup-detail-left .zoom').hide();
            $('.popup-detail-content .prev, .popup-detail-content .next').hide();
        });
    },
    bindData: function (aSrc) {
        var me = this;

        me.reset();
        $(window).resize(function () {
            me.resize(me.width, me.height);
        });

        $('.popup-detail-content .prev, .popup-detail-content .next').hide();
        $('#popup-detail-bg').scrollTop(0);
        $('.popup-detail-content li').removeClass('active');

        if ($.inArray(aSrc, me.arr) == 0) {
            $('.popup-detail-content .next').show();
        } else if ($.inArray(aSrc, me.arr) == me.arr.length - 1) {
            $('.popup-detail-content .prev').show();
        } else
            $('.popup-detail-content .prev, .popup-detail-content .next').fadeIn();

        var next = '';
        var prev = '';
        var width = 0;
        var height = 0;
        var lb = '';

        for (i = 0; i < me.arr.length; i++) {
            if (me.arr[i] == aSrc) {
                next = me.arr[i + 1];
                prev = me.arr[i - 1];
                break;
            }
        }

        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('w') != null)
            width = $(me.divElement).find('img[src="' + aSrc + '"]').attr('w');
        else
            width = $(me.divElement).find('img[src="' + aSrc + '"]').width();

        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('h') != null)
            height = $(me.divElement).find('img[src="' + aSrc + '"]').attr('h');
        else
            height = $(me.divElement).find('img[src="' + aSrc + '"]').height();

        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('lb') != null)
            lb = encodeURIComponent('#lb' + $(me.divElement).find('img[src="' + aSrc + '"]').attr('lb'));


        //bind du lieu
        var $imgClick = $(me.divElement).find('img[src="' + aSrc + '"]');
        if (me.isList) {
            me.name = $imgClick.parent().attr('name');
            me.vote = $imgClick.parent().attr('vote');
            me.avatar = $imgClick.parent().attr('avatar');
            me.desc = $imgClick.parent().attr('desc');
            me.id = $imgClick.parent().attr('uid');
            me.url = $imgClick.parent().attr('url');
            $('#popup-detail-bottom-vote').attr('vote', me.vote);
        }
        else {
            me.name = $('#detail-fullname').html();
            me.vote = $('#detail-vote').html();
            me.avatar = $('#detail-avatar').attr('src');
            me.desc = $imgClick.attr('desc');
            me.id = $('#detail-vote-btn').attr('uid');
            me.url = $('#hfUrl').val();
            $('#popup-detail-bottom-vote').attr('vote', me.vote);
            var check = $('#detail-vote-btn').attr('onclick');
            if (check != null && check != undefined && check.length > 0) me.isVote = false;
            else me.isVote = true;
        }
        //bind du lieu        

        me.width = width;
        me.height = height;

        $('.popup-detail-content > img').hide().attr('src', aSrc.replace(/thumb_w\/([0-9]+)\//, '')).delay(800).fadeIn();

        me.resize(width, height);
        me.callBack(next, prev);
        //me.album_load(aSrc);

        //bind data
        $('#popup-detail-bottom-infor').unbind().bind('click', function () { window.location.href = me.url; });
        $('#popup-detail-bottom-infor').find('img').attr('alt', me.name);
        $('#popup-detail-bottom-infor').find('img').attr('src', me.avatar);
        $('#popup-detail-bottom-infor').find('img').attr('title', me.name);
        $('#popup-detail-bottom-infor').find('a').attr('href', me.url);
        $('#popup-detail-bottom-infor').find('b').text(me.name);
        $('#popup-detail-bottom-vote').text(me.vote + " VOTE");
        $('.fb-lb').html(String.format('<iframe src="http://www.facebook.com/plugins/like.php?href={0}&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;width=80&amp;height=18" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:29px;float:left;" allowTransparency="true"></iframe>', me.url));
        if (me.displayVote == 1) {
            $('#popup-detail-bottom-vote').hide();
        }
        if (me.lockVote == 0 && me.isList == false) {
            $('#popup-detail-bottom-vote').addClass('hover');
            if (me.isVote) $('#popup-detail-bottom-vote').addClass('active').text(me.vote + ' VOTED');
            else {
                var w = $('#popup-detail-bottom-vote').width();
                $('#popup-detail-bottom-vote').css('width', w);
                $('#popup-detail-bottom-vote').hover(function () {
                    $(this).html('+1');
                },
                    function () {
                        $(this).html(me.vote + " VOTE");
                    });
                $('#popup-detail-bottom-vote').bind('click', function () { Vote.voteMember(me.id); });
            };
        }
        if (me.desc.trim() != '') $('#popup-detail-content-desc').text(me.desc).show();
        else $('#popup-detail-content-desc').hide();
        //bind data

        if (me.title != null)
            $('.popup-detail-right-top h5').text(me.title);
        if (me.sapo != null)
            $('.popup-detail-right-top p').text(me.sapo);

        var MingWidth = '100%';
        var MingAppKey = me.app_key;
        var MingTitle = $.base64Encode(encodeURI(me.title));

        var MingUrl = '';
        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('lb') != null)
            MingUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + lb;
        else
            MingUrl = aSrc;

        var MingNumCount = 5;
        var MingDebug = 1;
        var MingMin = 0; //1: hien thi box comment, 0: hien thi list comment
        var MingScroll = 0;
        var MingBox = 'mingid_comments_content_popup';
        var MingiframeId = 'mingId_frame_lightbox';

        $('#mingid_comments_content_popup').empty();
        //MINGID_IFRAME_FUNC.mingidGenIfram(MingWidth, 238, MingAppKey, MingUrl, MingTitle, MingNumCount, MingDebug, MingMin, MingScroll, MingUrl, MingBox, MingiframeId, 0, 0, 2);

        setTimeout(function () {
            me.showRightPanelScroll();
        }, 2000);

        /******/
        if (me.allowFullScreen && me.isZoom()) {
            me.resizeFullScreen(width, height);
            $('.popup-detail-content .zoom').fadeIn();
            me.flag = false;
        }
        /******/

        if (me.isZoom() || !this.flag)
            $('.popup-detail-content .zoom').fadeIn();
        else
            $('.popup-detail-content .zoom').hide();

        $('.popup-detail-content').off('mousemove').on('mousemove', function (e) {
            _imgwidth = parseInt($(this).width() / 2);
            _offset = parseInt(e.pageX - $(this).position().left);
            if (_offset >= _imgwidth) {
                $('#popup-detail-left .next').addClass('active');
                $('#popup-detail-left .prev').removeClass('active');
            } else {
                $('#popup-detail-left .prev').addClass('active');
                $('#popup-detail-left .next').removeClass('active');
            }

            $(this).off('click').on('click', function () {
                if (_offset > _imgwidth) {
                    if (next != null)
                        me.bindData(next);
                    else
                        return false;
                } else {
                    if (prev != null)
                        me.bindData(prev);
                    else
                        return false;
                }
            });
        });
    },
    openPopup: function () {
        $('#popup-detail-bg').fadeIn('slow');
        $('body').addClass('no-scroll');
        $('#scroll_top').hide();

        $(document).keyup(this.keyUp);
    },
    closePopup: function () {
        $('#popup-detail-bg').fadeOut('slow');
        $('body').removeClass('no-scroll');

        $(document).off('keyup');
    },
    resize: function (width, height) {
        var minImageWidth = 320;
        var minPhotoContainer = 320;
        var minWindowWidth = 700;
        var minWindowHieght = 400;
        var boxOther = 90;
        var box_album = 70;

        var windowWidth = window.innerWidth - 300;
        var windowHeight = window.innerHeight - 150;
        windowWidth = (windowWidth < minWindowWidth) ? minWindowWidth : windowWidth;
        windowHeight = (windowHeight < minWindowHieght) ? minWindowHieght : windowHeight;

        var commentWidth = 320;
        var marginLeft = 15;
        var boxfix = 30;

        var photoContainerWidth = windowWidth - $('#popup-detail-right').innerWidth();
        photoContainerWidth = (photoContainerWidth < minPhotoContainer) ? minPhotoContainer : photoContainerWidth;

        var imageWidth = photoContainerWidth;
        if (width <= photoContainerWidth)
            imageWidth = width;
        else
            imageWidth = photoContainerWidth;

        var imageHeight = parseInt(imageWidth * height / width);
        if (imageHeight > windowHeight) {
            imageHeight = windowHeight - boxOther;
            imageWidth = parseInt(width * imageHeight / height);
        }

        if (imageWidth < minImageWidth) {
            imageWidth = minImageWidth;
            imageHeight = parseInt(imageWidth * height / width);
        }

        while (imageHeight > windowHeight) {
            imageWidth = imageWidth - 10;
            imageHeight = parseInt(imageWidth * height / width);
        }


        $('#popup-detail-wrap').css({ 'width': photoContainerWidth });
        $('#popup-detail-left .move').hide();
        $('#popup-detail-left, .popup-detail-content').css('width', photoContainerWidth);

        if ($('#popup-detail-left ul').html() != '') {
            $('#popup-detail-left, .popup-detail-content').css('height', windowHeight - box_album);
        } else {
            $('#popup-detail-left, .popup-detail-content').css('height', windowHeight);
        }

        $('#popup-detail-left .move').hide();
        $('#popup-detail-right').css('height', windowHeight);
        $('#popup-detail-left').css('height', 'auto');

        var wWidth = document.documentElement.clientWidth;
        var wHeight = document.documentElement.clientHeight;

        var popupWidth = $('#popup-detail-wrap').width();
        var popupHeight = $('#popup-detail-wrap').height();

        _left = (wWidth / 2 - popupWidth / 2 - 10) > 0 ? wWidth / 2 - popupWidth / 2 - 10 : 0;
        $('#popup-detail-wrap').css({ 'left': _left });
        this.flag = true;

        //Ming Height
        //        MingHeight = this.adBoxHeight();
        //        if (MingHeight <= 150)
        //            MingHeight = 150;

        //        $('#mingId_frame_lightbox').attr('height', MingHeight);

        $('.popup-detail-content > img').attr('width', imageWidth).attr('height', imageHeight);
    },
    callBack: function (next, prev) {
        var me = this;

        $('#popup-detail-left .next').off('click').on('click', function () {
            if (next != null) {
                me.bindData(next);
            } else {
                return false;
            }
        })

        $('#popup-detail-left .prev').off('click').on('click', function () {
            if (prev != null) {
                me.bindData(prev);
            } else {
                return false;
            }
        });

        $('#popup-detail-left .zoom').off('click').on('click', function () {
            if (me.isZoom() && me.flag) {
                me.flag = false;
                me.resizeFullScreen(me.width, me.height);
            } else {
                $('#popup-detail-left .move').hide();
                $('.popup-detail-right-box').css({ 'position': 'relative', 'left': '0', 'top': '0' });
                $('#popup-detail-bg').off('scroll');

                $('.popup-detail-content .next').css({ 'position': 'absolute', 'right': '30px' });
                $('.popup-detail-content .prev').css({ 'position': 'absolute', 'left': '30px' });
                me.flag = true;
                me.resize(me.width, me.height);
            }

            $('.popup-detail-content .zoom').css({ 'position': 'absolute', 'right': '20px' });

            return false;
        });

        $('.move').off('click').on('click', function () {
            var y = $('#popup-detail-bg').scrollTop();
            $('#popup-detail-bg').animate({ scrollTop: y + 150 }, 'slow');

            return false;
        });

        $('.popup-slide ul li a img').off('click').on('click', function () {
            if ($(this).parent().parent('li').hasClass('active'))
                return;

            me.bindData($(this).attr('src'));

            return false;
        });

        $('#popup-detail-wrap').click(function () { return false; });
        $('#popup-detail-bg').click(function () { me.closePopup(); });
    },
    keyUp: function (e) {
        e.preventDefault();
        if (e.keyCode == 27) {
            photoDetail.closePopup();
        }
        if (e.keyCode == 37) {
            $('#popup-detail-left .prev').click();
        }
        if (e.keyCode == 39) {
            $('#popup-detail-left .next').click();
        }
    },
    resizeFullScreen: function (width, height) {
        var box_album = 70;
        var leftpx_next = $('#popup-detail-right').innerWidth() + $('#popup-detail-wrap').position().left + 45 + 'px';
        var leftpx_prev = $('#popup-detail-wrap').position().left + 30 + 'px';

        $('#popup-detail-bg').scrollTop(0);

        if (width > $('#popup-detail-left').width())
            $('.popup-detail-content > img').attr({ 'width': $('#popup-detail-left').width(), 'height': Math.round($('#popup-detail-left').width() * height / width) });
        else
            $('.popup-detail-content > img').attr({ 'width': width, 'height': height });

        $('#popup-detail-left').css('height', 'auto');

        $('.popup-detail-content .next').css({ 'position': 'fixed', 'right': leftpx_next });
        $('.popup-detail-content .prev').css({ 'position': 'fixed', 'left': leftpx_prev });

        if ($('#popup-detail-left ul').html() != '') {
            if (this.allowFullScreen) {
                $('#popup-detail-right').css('height', $('.popup-detail-content > img').height() + box_album);
            } else {
                $('#popup-detail-right').css('height', $('#popup-detail-left').height() + box_album);
            }
        } else {
            $('#popup-detail-left, .popup-detail-content').css('height', windowHeight);

            if (this.allowFullScreen) {
                $('#popup-detail-right').css('height', $('.popup-detail-content > img').height());
            } else {
                $('#popup-detail-right').css('height', $('.popup-detail-content').height());
            }
        }

        var windowWidth = window.innerWidth - 100;
        var windowHeight = window.innerHeight - 75;
        var margin_left = 15;
        var wWidth = document.documentElement.clientWidth;
        var popupWidth = $('#popup-detail-wrap').width();
        var leftpx = $('#popup-detail-left').width() + (wWidth / 2 - popupWidth / 2 - 10) + margin_left;

        $('#popup-detail-left .move').show();

        $('#popup-detail-bg').scroll(function () {
            var y = $(this).scrollTop();
            if (y > 35) {
                $('.popup-detail-right-box').css({ 'position': 'fixed', 'left': leftpx, 'top': '0', 'height': windowHeight + 40 });
                $('#popup-detail-left .move').hide();

                $('.popup-detail-content .zoom').css({ 'position': 'fixed', 'right': $('#popup-detail-right').innerWidth() + $('#popup-detail-wrap').position().left + 40 + 'px' });
            } else {
                $('.popup-detail-right-box').css({ 'position': 'relative', 'left': '0', 'top': '0' });
                $('.popup-detail-content .zoom').css({ 'position': 'absolute', 'right': '20px' });
            }
        });
    },
    isZoom: function () {
        zoom = false;
        if ((parseInt($('.popup-detail-content > img').attr('width'), 10) < parseInt(this.width, 10) && parseInt($('.popup-detail-content > img').attr('width'), 10) < parseInt($('#popup-detail-left').width(), 10)) || !this.flag) {
            zoom = true;
        }
        return zoom;
    },
    album_load: function (aSrc) {
        var me = this;
        var box_width = 0;
        var box_height = 50;
        var _ImgArr = [];
        var _margin = 8;
        var _width = 0;
        var index = $.inArray(aSrc, me.arr);
        var box = 0;
        var next = index + 1;
        me.photoWidth = $('#popup-detail-left').width();

        $('.popup-slide li img[src="' + aSrc + '"]').parent().parent().addClass('active');

        if (me.arr.length > 5) {
            if ($('.popup-slide ul').html() != '') {
                for (i = 0; i < me.arr.length; i++) {
                    _ImgArr = me.getImgSize(me.arr[i]).split('|');

                    if (i > 0)
                        box_width = box_width + _margin;

                    box_width += parseInt(_ImgArr[0] * box_height / _ImgArr[1]);

                    if (box_width > me.photoWidth)
                        continue;

                    box = i + 1;
                }

                if (me.photoWidth < box_width + (box * _margin)) {
                    $('.popup-slide li').css('float', 'left').parent().css('width', '5000px');
                    if (next <= 5) {
                        $('.popup-slide ul').animate({ left: '0' }, 500);
                    } else {
                        if (me.arr.length - index <= 5 && me.arr.length > 10)
                            return;

                        for (var i = 0; i < next - 5; i++) {
                            _width += $('.popup-slide li img[src="' + me.arr[i] + '"]').parent().parent().outerWidth();
                        }

                        var left = _width + ($('.popup-slide ul').position().left - 10);
                        $('.popup-slide ul').animate({ left: '-=' + left }, 500);
                    }
                }
            }
        }
    },
    getImgSize: function (src) {
        var newImg = new Image();
        newImg.src = src;
        p = $(newImg).ready(function () {
            return { width: newImg.width, height: newImg.height };
        });
        return p[0]['width'] + '|' + p[0]['height'];
    },
    adBoxHeight: function () {
        var height = 0;
        box = 160;

        if (parseInt($('#popup-detail-right').height()) > 768) {
            height = $('#popup-detail-right').height() - $('.popup-detail-right-top').innerHeight() - box * 2;
            //$('#mingid_comments_content_popup > #mingId_frame_lightbox').attr('height', height);
        } else {
            height = $('#popup-detail-right').height() - $('.popup-detail-right-top').innerHeight() - box;
            //$('#mingid_comments_content_popup > #mingId_frame_lightbox').attr('height', height);
        }
        return height;
    },
    showRightPanelScroll: function () {
        try {
            if ($('.popup-detail-right-box').children(':first').css("top").indexOf("-") != -1) {
                $('.popup-detail-right-box').children(':first').css({ top: 0 });
            }

            $('.popup-detail-right-box').slimScrollCustom({
                railVisible: true,
                railOpacity: 0.4,
                largeSize: "11px",
                height: 1553
            });
        } catch (e) {
        }
    },
    reset: function () {
        $('#popup-detail-left .move').hide();
        $('.popup-detail-content .popup-slide').hide();
        $('.popup-slide li').removeClass('active');
        $('.popup-detail-right-box').css({ 'position': 'relative', 'left': '0', 'top': '0' });
        $('#popup-detail-bg').off('scroll');
        $('.popup-detail-content .next').css({ 'position': 'absolute', 'right': '30px' });
        $('.popup-detail-content .prev').css({ 'position': 'absolute', 'left': '30px' });
        this.flag = true;
    }
};

String.format = function (text) {
    //check if there are two arguments in the arguments list
    if (arguments.length <= 1) {
        //if there are not 2 or more arguments there's nothing to replace
        //just return the original text
        return text;
    }

    //decrement to move to the second argument in the array
    var tokenCount = arguments.length - 2;
    for (var token = 0; token <= tokenCount; token++) {
        //iterate through the tokens and replace their placeholders from the original text in order
        text = text.replace(new RegExp("\\{" + token + "\\}", "gi"),
                                                arguments[token + 1]);
    }
    return text;
};